<template>
  <div class="habit-goal">
    <div class="card month-check">
      <div class="card-header">
        <div class="card-icon">
          <i class="ri-calendar-check-fill"></i>
        </div>
        <div class="card-title">月打卡</div>
      </div>
      <div class="card-info">
        <div class="count">{{ monthCheck }}</div>
        <div class="unit">天</div>
      </div>
    </div>
    <div class="card total-check">
      <div class="card-header">
        <div class="card-icon">
          <i class="ri-flashlight-fill"></i>
        </div>
        <div class="card-title">总打卡</div>
      </div>
      <div class="card-info">
        <div class="count">{{ totalCheck }}</div>
        <div class="unit">天</div>
      </div>
    </div>
    <div class="card month-complete">
      <div class="card-header">
        <div class="card-icon">
          <i class="ri-discount-percent-fill"></i>
        </div>
        <div class="card-title">月完成率</div>
      </div>
      <div class="card-info">
        <div class="count">{{ monthComplateRate }}</div>
        <div class="unit">%</div>
      </div>
    </div>
    <div class="card streak-count">
      <div class="card-header">
        <div class="card-icon">
          <i class="ri-fire-fill"></i>
        </div>
        <div class="card-title">连续打卡</div>
      </div>
      <div class="card-info">
        <div class="count">{{ streakCheck }}</div>
        <div class="unit">天</div>
      </div>
    </div>
    <div v-if="store.currentHabit.holdTime !== 'forever'" class="card goal">
      <div class="card-left">
        <div class="current-goal">
          <div class="current-count">{{ store.currentHabit.checkInRecords.length }}</div>
          <span>/</span>
          <div class="goal-count">{{ store.currentHabit.holdTime }}</div>
        </div>
        <div class="text">
          距离达成还有{{ store.currentHabit.holdTime - store.currentHabit.checkInRecords.length }}天
        </div>
      </div>
      <div class="card-right">
        <img src="/src/assets/imgs/xunzhang.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import habitStore from '@renderer/store/habit'
import dayjs from 'dayjs'
import { computed } from 'vue'

const store = habitStore()

const monthCheck = computed(() => {
  return store.currentHabit?.checkInRecords.filter(
    (item) => dayjs().format('YYYY-MM') === dayjs(item).format('YYYY-MM')
  ).length
})

const totalCheck = computed(() => {
  if (store.currentHabit) {
    return store.currentHabit.checkInRecords.length
  }
  return 0
})

const monthComplateRate = computed(() => {
  if (store.currentHabit) {
    return Math.floor((monthCheck.value / dayjs().daysInMonth()) * 100)
  }
  return 0
})

const streakCheck = computed(() => {
  if (store.currentHabit) {
    let count = 0
    const currentData = dayjs()
    while (true) {
      if (
        store.currentHabit.checkInRecords.includes(
          currentData.subtract(count + 1, 'day').format('YYYY-MM-DD')
        )
      ) {
        count++
      } else {
        break
      }
    }
    if (store.currentHabit.checkInRecords.includes(currentData.format('YYYY-MM-DD'))) {
      count++
    }
    return count
  }
  return 0
})
</script>

<style lang="scss" scoped>
.habit-goal {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  .card {
    background-color: var(--xz-card-bg);
    border-radius: var(--xz-main-radius);
    display: flex;
    flex-direction: column;
    width: calc(50% - 5px);
    height: fit-content;
    padding: 10px 20px;

    .card-header {
      display: flex;
      align-items: center;
      gap: 5px;
      height: fit-content;

      .card-icon {
        color: var(--xz-fontcolor);
      }

      .card-title {
        font-size: 14px;
      }
    }

    .card-info {
      display: flex;
      align-items: baseline;
      gap: 5px;
      height: fit-content;

      .count {
        font-weight: bold;
        font-size: 1.2rem;
      }

      .unit {
        font-size: 14px;
      }
    }

    &.month-check {
      i {
        color: var(--xz-green);
      }
    }

    &.total-check {
      i {
        color: var(--xz-blue);
      }
    }

    &.month-complete {
      i {
        color: var(--xz-orange);
      }
    }

    &.streak-count {
      i {
        color: var(--xz-pink);
      }
    }

    &.goal {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .card-left {
        display: flex;
        flex-direction: column;

        .current-goal {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 1.2rem;
        }

        .text {
          font-size: 12px;
          opacity: 0.7;
        }
      }

      .card-right {
        display: flex;
        align-items: center;

        img {
          width: 40px;
          height: 40px;
        }
      }
    }
  }
}
</style>
